Vue CLI 教程

1. Vue.js 简介和特性

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它的核心库只关注视图层，易于与其他库或现有项目集成。Vue.js 具有以下特性：

• 响应式数据绑定：数据与视图自动同步。
• 组件化：通过组件构建复杂的 UI。
• 虚拟 DOM：高效地更新和渲染 DOM。
• 灵活性：可以逐步采用，从小到大。

2. 开发环境搭建

2.1 Vue CLI 简介

Vue CLI 是一个官方提供的脚手架工具，用于快速搭建 Vue.js 项目。它集成了项目构建、开发服务器、代码检查等功能。

2.2 安装 Vue CLI

首先，确保你已经安装了 Node.js 和 npm。然后，通过以下命令安装 Vue CLI：

npm install -g @vue/cli

安装完成后，可以通过以下命令检查版本：

vue --version

2.3 创建第一个 Vue 应用

使用 Vue CLI 创建一个新的 Vue 项目：

vue create my-first-vue-app

在创建过程中，你可以选择预设配置或手动选择特性。

3. Vue 实例和生命周期

3.1 Vue 实例

每个 Vue 应用都是通过创建一个 Vue 实例开始的：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
});

3.2 生命周期钩子

Vue 实例有一系列生命周期钩子，允许你在特定阶段执行代码：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log('Vue instance created');
  },
  mounted() {
    console.log('Vue instance mounted');
  }
});

4. 模板语法和数据绑定

4.1 插值

使用双大括号 {{ }} 进行文本插值：

<div id="app">
  {{ message }}
</div>

4.2 指令

Vue 提供了多种指令，如 v-bind、v-model、v-if 等：

<div id="app">
  <p v-if="show">This is visible</p>
  <input v-model="message" />
</div>

5. 组件化开发

5.1 定义组件

组件是 Vue.js 的核心概念之一。你可以通过 Vue.component 定义全局组件：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

5.2 使用组件

在模板中使用自定义组件：

<div id="app">
  <my-component></my-component>
</div>

6. 组件通信

6.1 Props

父组件通过 props 向子组件传递数据：

Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

6.2 Events

子组件通过 $emit 向父组件发送事件：

Vue.component('child-component', {
  template: '<button @click="sendMessage">Send</button>',
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child');
    }
  }
});

7. 计算属性和侦听器

7.1 计算属性

计算属性用于处理依赖于其他数据的数据：

new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});

7.2 侦听器

侦听器用于监听数据变化并执行相应操作：

new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`);
    }
  }
});

8. 条件渲染和列表渲染

8.1 条件渲染

使用 v-if、v-else-if、v-else 进行条件渲染：

<div id="app">
  <p v-if="show">This is visible</p>
  <p v-else>This is hidden</p>
</div>

8.2 列表渲染

使用 v-for 进行列表渲染：

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

9. 表单输入绑定

使用 v-model 进行表单输入的双向绑定：

<div id="app">
  <input v-model="message" />
  <p>{{ message }}</p>
</div>

10. 单文件组件 (.vue 文件)

单文件组件将模板、脚本和样式封装在一个文件中：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from SFC'
    };
  }
};
</script>

<style scoped>
p {
  color: blue;
}
</style>

11. 组件注册

11.1 全局注册

使用 Vue.component 进行全局注册：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

11.2 局部注册

在组件内部进行局部注册：

export default {
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
};

12. Scoped CSS

Scoped CSS 允许你在单文件组件中定义局部样式：

<style scoped>
p {
  color: blue;
}
</style>

13. CSS 预处理器 (Sass, Less)

Vue CLI 支持多种 CSS 预处理器，如 Sass 和 Less：

npm install -D sass-loader sass

然后在单文件组件中使用：

<style lang="scss">
$primary-color: blue;
p {
  color: $primary-color;
}
</style>

14. 动态样式和类绑定

14.1 动态类绑定

使用 :class 动态绑定类：

<div :class="{ active: isActive }">Dynamic Class</div>

14.2 动态样式绑定

使用 :style 动态绑定样式：

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">Dynamic Style</div>

15. Vue Router

Vue Router 是 Vue.js 的官方路由管理器：

npm install vue-router

配置路由：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

16. Vuex 状态管理

Vuex 是 Vue.js 的官方状态管理库：

npm install vuex

创建 store：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

在组件中使用：

export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.dispatch('increment');
    }
  }
};

17. 混入 (Mixins)

混入用于复用组件选项：

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

export default {
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
};

18. 自定义指令

自定义指令用于操作 DOM：

Vue.directive('focus', {
  inserted(el) {
    el.focus();
  }
});

使用自定义指令：

<input v-focus />

19. 插件系统

插件用于扩展 Vue 的功能：

const MyPlugin = {
  install(Vue) {
    Vue.mixin({
      created() {
        console.log('Plugin created');
      }
    });
  }
};

Vue.use(MyPlugin);

20. 虚拟 DOM 和 diff 算法

Vue.js 使用虚拟 DOM 来高效地更新实际 DOM。diff 算法用于比较新旧虚拟 DOM 树，找出需要更新的部分。

21. 异步组件

异步组件用于按需加载组件：

const AsyncComponent = () => import('./AsyncComponent.vue');

export default {
  components: {
    AsyncComponent
  }
};

22. keep-alive 组件缓存

<keep-alive> 用于缓存组件实例：

<keep-alive>
  <component :is="currentComponent"></component>
</keep-alive>

23. 懒加载和代码分割

使用 import() 进行懒加载和代码分割：

const AsyncComponent = () => import('./AsyncComponent.vue');

24. Vue DevTools

Vue DevTools 是一个浏览器扩展，用于调试 Vue.js 应用。

25. Vue Test Utils

Vue Test Utils 是 Vue.js 的官方测试工具库：

npm install @vue/test-utils

编写测试：

import { mount } from '@vue/test-utils';
import MyComponent from './MyComponent.vue';

test('renders correctly', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain('Hello');
});

26. Vue CLI

Vue CLI 是一个强大的脚手架工具，用于快速搭建 Vue.js 项目。

27. Nuxt.js (Vue.js 服务端渲染框架)

Nuxt.js 是一个基于 Vue.js 的服务端渲染框架，用于构建通用应用。

28. 项目结构组织

良好的项目结构有助于代码维护：

my-project/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── store/
│   ├── router/
│   ├── App.vue
│   └── main.js
├── package.json
└── README.md

29. 代码风格和规范

使用 ESLint 和 Prettier 进行代码风格检查和格式化：

npm install eslint prettier eslint-plugin-vue eslint-config-prettier

配置 .eslintrc.js：

module.exports = {
  extends: [
    'plugin:vue/essential',
    'eslint:recommended',
    'prettier'
  ],
  rules: {
    'vue/no-unused-vars': 'error'
  }
};

30. 错误处理和调试技巧

使用 console.log、debugger 和 Vue DevTools 进行调试。

31. 性能优化策略

• 使用 v-if 替代 v-show。
• 使用 keep-alive 缓存组件。
• 使用 v-once 渲染静态内容。

32. TypeScript 与 Vue

Vue 支持 TypeScript：

npm install vue-class-component vue-property-decorator

编写 TypeScript 组件：

import { Component, Vue } from 'vue-property-decorator';

@Component
export default class MyComponent extends Vue {
  message = 'Hello, TypeScript!';
}

33. 渲染函数和 JSX

渲染函数用于手动创建虚拟 DOM：

export default {
  render(h) {
    return h('div', 'Hello, Vue!');
  }
};

使用 JSX：

export default {
  render() {
    return <div>Hello, Vue!</div>;
  }
};

34. 服务端渲染 (SSR)

服务端渲染用于提升首屏加载性能：

npm install @vue/server-renderer

编写 SSR 代码：

import { createSSRApp } from 'vue';
import { renderToString } from '@vue/server-renderer';
import App from './App.vue';

const app = createSSRApp(App);

renderToString(app).then(html => {
  console.log(html);
});

35. 静态站点生成 (SSG)

静态站点生成用于生成静态 HTML 文件：

npm install vuepress

配置 vuepress：

module.exports = {
  title: 'My VuePress Site',
  description: 'A static site generated with VuePress'
};

36. 待办事项应用

创建一个简单的待办事项应用：

<template>
  <div>
    <input v-model="newTodo" @keyup.enter="addTodo" />
    <ul>
      <li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: '',
      todos: []
    };
  },
  methods: {
    addTodo() {
      this.todos.push({ id: Date.now(), text: this.newTodo });
      this.newTodo = '';
    }
  }
};
</script>

37. 博客系统

创建一个简单的博客系统，使用 Vue Router 和 Vuex：

vue create blog-system
cd blog-system
npm install vue-router vuex

配置路由和状态管理，编写博客组件。

38. 电商网站前端

创建一个简单的电商网站前端，使用 Vue Router 和 Vuex：

vue create ecommerce-site
cd ecommerce-site
npm install vue-router vuex

配置路由和状态管理，编写商品列表、购物车等组件。

39. 常用 UI 组件库 (Element UI, Vuetify)

使用 Element UI 或 Vuetify 快速构建 UI：